<script setup lang="ts">
import {reactive, ref, toRaw} from "vue";
import  useStore from '../../modules/store/platform'
import {ElMessage, ElMessageBox} from "element-plus";
const store = useStore()
console.log(store)
const input = ref(null)
// 控制对话框的显示与隐藏的开关
const dialogVisible = ref(false)
const formInline = reactive({
  name: '',
  additive: '',
  time: '',
  key: 0
})
const search = ()=>{
  //  @ts-ignore 调用pinia中的搜索方法
  store.searchA(input.value)
}
const onSubmit = () => {
  // console.log(formInline.value)
  dialogVisible.value = false
  if(formInline.name===''){
    ElMessage({
      type: 'error',
      message: '商品分类未传递参数'
    })
    return
  }
  store.add(formInline)
  // formInline = toRaw(formInline)
  formInline.additive = '';
  formInline.name = '';
  formInline.time =''
}
const handleClose = (done: () => void) => {
  ElMessageBox.confirm('Are you sure to close this dialog?')
      .then(() => {
        done()
      })
      .catch(() => {
      })
}
</script>

<template>
  <el-row :gutter="20" style="margin: 15px 0">
    <el-col :span="2"><p style="text-align: center; line-height: 30px">商品分类</p></el-col>
    <el-col :span="4"><el-input v-model.trim="input" placeholder="请输入关键字" /></el-col>
    <el-col :span="1.5"><el-button type="warning" class="button" @click="search">搜索</el-button></el-col>
    <el-col :span="6"><el-button type="warning"  class="button" @click="dialogVisible = true">添加</el-button></el-col>
  </el-row>
  <el-dialog
      v-model="dialogVisible"
      title="Tips"
      width="30%"
      :before-close="handleClose"
  >
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="分类名称">
        <el-input v-model="formInline.name" placeholder="Approved by" clearable />
      </el-form-item>
      <el-form-item label="添加者">
        <el-input v-model.number="formInline.additive" placeholder="Approved by" clearable />
      </el-form-item>
      <el-form-item label="添加时间">
        <el-date-picker
            v-model.trim="formInline.time"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="Pick a date"
            :default-value="new Date(2023, 7, 14)"
        />
      </el-form-item>
      <el-form-item style="display: flex;justify-content: center">
        <el-button type="primary" @click="onSubmit">添加</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<style scoped lang="scss">

</style>
